<template>
    <SkeletonCategory v-if="skeletonLoading" />
    <view class="category-main tabbar_padding_b">
        <NavBar title="商品" />
        <view class="search-title">
            <view class="search-title-left" @click="toSearch">
                <img class="icon-img" :src="getImgOssUrl('/ui-prod-2.0.0/icon_img02.png')" alt="" />
                <view>商品名称</view>
            </view>
            <view class="search-title-right" @click="toSearch">搜索</view>
        </view>
        <view class="category-content">
            <template v-if="Data.isShopList">
                <view class="list-left tabbar_padding_b" :style="{ top: navBarInfo.navbarHeight + 55 + 'px;' }">
                    <scroll-view
                        id="leftHeight"
                        style="height: 100%"
                        :scroll-top="Data.scrollNavTop"
                        :scroll-with-animation="true"
                        :scroll-y="true">
                        <view id="navHeight">
                            <view
                                v-for="(item, index) in navList"
                                :key="item.id"
                                @click="clickNav(index)"
                                :class="{ 'list-nav-active': item.active }"
                                class="nav-item">
                                {{ item.categoryName }}
                            </view>
                        </view>
                    </scroll-view>
                </view>
                <view class="list-right" :style="{ top: navBarInfo.navbarHeight + 49 + 'px;' }">
                    <view class="list-nav-children" id="navChildrenId">
                        <u-tabs
                            :list="navChildrenList"
                            :current="rightNavCurrent"
                            keyName="categoryName"
                            lineColor="#ffffff"
                            lineHeight="0"
                            lineWidth="0"
                            :inactiveStyle="{
                                ...tabsStyles,
                                color: '#999999',
                                border: '2rpx solid #979797'
                            }"
                            :activeStyle="{
                                ...tabsStyles,
                                color: '#fe292b',
                                border: '2rpx solid #fe292b'
                            }"
                            :itemStyle="{
                                padding: 0,
                                marginRight: '18rpx'
                            }"
                            @click="v => clickNavChildren(v.index)"></u-tabs>
                    </view>
                    <view class="list-right-shop tabbar_padding_b" id="scrollShopWrapId">
                        <scroll-view
                            id="goodScrollId"
                            class="list-right-shop-scroll"
                            :scroll-y="true"
                            :scroll-top="Data.goodScrollTop"
                            lower-threshold="100"
                            @scroll="scrollShop"
                            @scrolltolower="scrollTolower">
                            <view
                                id="scrollShopId"
                                class="shop-list"
                                @touchstart="touchstartEvent"
                                @touchend="touchendEvent">
                                <template v-if="shopList.length > 0">
                                    <view
                                        v-for="(item, index) in shopList"
                                        :key="item.goodsId"
                                        class="shop-item"
                                        @click.stop="jump(item)">
                                        <view class="common">
                                            <template v-if="getSkillNum(item)">
                                                <GoodsImgStatus
                                                    fontSize="22rpx"
                                                    width="91rpx"
                                                    lineWidth="69rpx"
                                                    v-if="item.onSale == 3" />
                                            </template>
                                            <image
                                                class="shop-item-img"
                                                :src="item?.coverSrc || defaultImg"
                                                :lazy-load="true"
                                                mode="aspectFill"
                                                @error="imageError(index)"
                                                alt=""></image>
                                        </view>
                                        <view class="shop-item-right">
                                            <!-- class="shop-logo" -->
                                            <view :class="['shop-item-name', getTagName(item)]">{{
                                                item.goodsName
                                            }}</view>
                                            <view class="shop-item-button">
                                                <view>
                                                    <text>￥</text>
                                                    <text class="price">{{ priceNum(item.goodsMinPrice, 0) }}</text>
                                                    <text v-if="priceNum(item.goodsMinPrice, 1)"
                                                        >.{{ priceNum(item.goodsMinPrice, 1) }}
                                                    </text>
                                                    <text
                                                        class="price-qi"
                                                        v-if="item.goodsMinPrice != item.goodsMaxPrice">
                                                        起
                                                    </text>
                                                </view>
                                                <view class="shop-cart" @click.stop="e => jumpCart(item, index, e)">
                                                    <view v-if="item.activity?.activity_type == 2" class="seckill_btn">
                                                        马上抢
                                                    </view>
                                                    <image
                                                        v-else-if="item.goodsStock > 0 && item.onSale == 1"
                                                        class="icon-img"
                                                        :src="getImgOssUrl('/ui-prod-2.0.0/icon_img01.png')"
                                                        alt="" />
                                                    <image
                                                        v-else
                                                        class="icon-img"
                                                        :src="getImgOssUrl('/ui-prod-2.0.0/icon_img01_disabled.png')"
                                                        alt="" />
                                                    <view class="shop-cart-num shop-cart-num-s" v-if="item.cartNum > 99"
                                                        >99<text>+</text></view
                                                    >
                                                    <view
                                                        class="shop-cart-num"
                                                        :class="{ 'shop-cart-num-s': item.cartNum >= 10 }"
                                                        v-else-if="item.cartNum">
                                                        {{ item.cartNum }}
                                                    </view>
                                                </view>
                                            </view>
                                        </view>
                                    </view>
                                </template>
                                <Empty v-if="state.goodsEmpty" mode="暂无商品" />
                                <!-- <view class="shop-list-loading" v-if="Data.totalCount != shopList.length">
                                    加载中…
                                </view> -->
                                <view class="u_loadmore">
                                    <u-loadmore :status="Data.loadmoreStatus" nomoreText=" " />
                                </view>
                            </view>
                        </scroll-view>
                    </view>
                </view>
            </template>
            <template v-else>
                <view class="no-shop">
                    <Empty mode="暂无商品，敬请期待" />
                </view>
            </template>
        </view>
        <uni-popup ref="popup" :safe-area="false" @change="change">
            <view class="popup-content popup_padding_b">
                <view class="pop_cancel" @click.stop="cancel">
                    <img class="pop_logo" :src="getImgOssUrl('/ui-prod-2.0.0/cancel_1.1.png')"
                /></view>
                <skupop
                    :type="state.type"
                    :activityId="state.activityId"
                    :activityStatus="state.activityStatus"
                    :goodsId="goodsData.goodsId"
                    :goodsNo="goodsData.goodsNo"
                    :show="goodsData.show"
                    @updata="getGroupData"
                    @popup="popup.open('bottom')"
                    @close="close"
                    @buyGoods="toConfirm"
            /></view>
        </uni-popup>
        <Loading />
    </view>
    <TabBar url="/pages/tabbar/category" />
</template>
<script setup>
import SkeletonCategory from '@/components/skeletonCategory';
import Empty from '@/components/empty';
import TabBar from '@/components/tabBar';
import NavBar from '@/components/navBar';
import { ref, reactive, onMounted, nextTick } from 'vue';
import { onShow, onReady, onUnload, onHide, onShareAppMessage } from '@dcloudio/uni-app';
import { floatDivide, getImgOssUrl, checkToken } from '@/commons/utils.js';
import storage from '@/commons/storage';
import request from '@/request';
import store from '@/store';
import router from '@/router';
import skupop from '@/components/skupop';
import Loading from '@/components/el-loading';
import { useTrace } from '@/commons/trace';
import GoodsImgStatus from '@/components/goodsImgStatus';
const { traceStart, traceLoad, traceStay, traceReport } = useTrace({ autoLoad: false });
const skeletonLoading = ref(true);
const navBarInfo = store.useNavBarStore();

const shopScrollTop = ref(0.1);

const goodsData = reactive({ goodsId: '', goodsNo: '', show: false });

const defaultImg = ref(getImgOssUrl('/ui-prod-2.0.0/errorImg.png'));
const props = defineProps(['shopId']);
const shopIndex = ref(0);
const shopName = ref('');
const tabsStyles = {
    padding: '8rpx 22rpx',
    fontSize: '25rpx',
    lineHeight: '36rpx',
    borderRadius: '26rpx'
};
const Data = reactive({
    shopId: storage.get('ZW_SHOP_ID'),
    pageNum: 1,
    pageSize: 10,
    scrollNavTop: 0,
    scrollShopTop: 0,
    scrollShopHeight: 0,
    scrollLeft: 0,
    navChildrenWidth: 0,
    navChildrenScrollW: 0,
    scrollUpperFlag: true,
    scrollLowerFlag: false,
    totalCount: 0,
    cateInfo: {},
    isShopList: true,
    goodScrollTop: 0,
    loadmoreStatus: 'nomore'
});
let appear = null;
const state = reactive({
    type: 1,
    activityId: '',
    activityStatus: '',
    // 当前分组下数据是否为空
    goodsEmpty: false
});
const navList = ref([]);

const navChildrenList = ref([]);

const shopList = ref([]);

const shopListFlag = ref(true);
const popup = ref();

// 左侧滚动到当前高亮选项卡位置
const leftScrollPositionHandle = async index => {
    const query = uni.createSelectorQuery();
    let navHeight = 0;
    let leftHeight = 0;
    let itemHeight = 0;
    // 保证左侧高度都有获取到
    await Promise.all([
        new Promise(resolve => {
            query.select('#leftHeight').boundingClientRect(data => {
                leftHeight = data.height;
                resolve();
            });
            query.exec();
        }),
        new Promise(resolve => {
            query.select('#navHeight').boundingClientRect(data => {
                navHeight = data.height;
                itemHeight = navHeight / navList.value.length;
                resolve();
            });
            query.exec();
        })
    ]);
    if (itemHeight * index > leftHeight / 2) {
        Data.scrollNavTop = itemHeight * index - leftHeight / 2;
    } else {
        Data.scrollNavTop = 0;
    }
};
const clickNav = index => {
    let flag = index + 1 > navList.value.length;
    if (flag) {
        return;
    }
    navList.value.map(el => (el.active = false));
    navList.value[index].active = true;
    navChildrenList.value = navList.value[index].children;
    clickNavChildren(0);
    leftScrollPositionHandle(index);
};
const rightNavCurrent = ref(0);
const clickNavChildren = index => {
    rightNavCurrent.value = index;
    navChildrenList.value.map(el => (el.active = false));
    navChildrenList.value[index].active = true;
    let info = navChildrenList.value[index];
    Data.cateInfo = {
        id: info.id,
        parentId: info.parentId
    };
    Data.pageNum = 1;
    shopScrollTop.value = 0.1;
    shopListFlag.value = false;
    shopList.value = [];
    Data.totalCount = 0;
    Data.goodScrollTop = Data.scrollShopTop;
    nextTick(() => {
        Data.goodScrollTop = Data.scrollShopTop = 0;
    });
    queryShopList();
};

const scrollShop = e => {
    Data.scrollShopTop = e.detail.scrollTop;
};

const scrollTolower = () => {
    if (Data.totalCount === shopList.value.length) return;
    Data.pageNum = Math.abs(~(shopList.value.length / 10));
    if (Data.pageNum > Data.totalPage) return;
    queryShopList(true);
};

const scrollUp = () => {
    let index = navChildrenList.value.findIndex(el => el.active) || 0;
    let navIndex = navList.value.findIndex(el => el.active) || 0;
    if (index == 0) {
        if (!navIndex) return;
        clickNav(navIndex - 1);
    } else {
        clickNavChildren(index - 1);
    }
};

const scrollNext = () => {
    let index = navChildrenList.value.findIndex(el => el.active) || 0;
    let navIndex = navList.value.findIndex(el => el.active) || 0;
    let listLength = navChildrenList.value.length;
    if (index + 1 >= listLength) {
        clickNav(navIndex + 1);
    } else {
        clickNavChildren(index + 1);
    }
};

let curPoint = ref(0);
let clientY = ref(0);
let downFlag = true;
const touchstartEvent = e => {
    if (Data.scrollShopTop < 2) {
        downFlag = true;
    } else {
        downFlag = false;
    }
    curPoint.value = e.touches[0].clientY;
};

const touchendEvent = e => {
    clientY.value = e.changedTouches[0].pageY;
    let scrollLowerH = curPoint.value - clientY.value;
    // 上拉
    if (scrollLowerH > 30) {
        if (appear && Data.totalCount === shopList.value.length) {
            scrollNext();
        }
        // 下拉
    } else if (scrollLowerH < -30) {
        if (downFlag) {
            scrollUp();
        }
    }
};

const queryLevelList = () => {
    let params = {
        shopId: Data.shopId
    };
    request('categoryServ', params)
        .then(res => {
            let list = res.data.list || [];
            let categoryId = storage.get('CATEGORY_ID');
            let hasChoose = list.filter(item => item.id == categoryId);
            let leftCurrentIndex = 0;
            list.forEach((el, index) => {
                if (!hasChoose.length && index == 0) {
                    // 装修配置的分组下面没有商品或者以前的历史数据都默认选中第一个分组;
                    el.active = true;
                } else if (hasChoose.length && el.id == categoryId) {
                    // 选中后台配置的分组
                    el.active = true;
                    leftCurrentIndex = index;
                } else {
                    el.active = false;
                }
            });
            navList.value = list;
            nextTick(() => {
                leftScrollPositionHandle(leftCurrentIndex);
            });
            let navInfo = list.find(el => el.active) || {};
            let childrenList = navInfo.children || [];
            childrenList.forEach((el, index) => {
                if (index == 0) {
                    el.active = true;
                } else {
                    el.active = false;
                }
            });
            navChildrenList.value = childrenList;
            let info = navChildrenList.value.length && navChildrenList.value[0];
            Data.cateInfo.parentId = info.parentId;
            Data.cateInfo.id = info.id;
            Data.pageNum = 1;
            if (info.id && info.parentId) {
                queryShopList();
                traceLoad('visit_page_cate_list', { cateId: info.id, cateName: info.parentId });
                Data.isShopList = true;
            } else {
                Data.isShopList = false;
            }
            skeletonLoading.value = false;
        })
        .catch(error => {
            skeletonLoading.value = false;
            uni.showToast({
                title: error.data.msg,
                icon: 'none',
                duration: 2000
            });
        });
};
queryLevelList();

let rightShopFlag = false;
const queryShopList = type => {
    if (rightShopFlag) return;
    rightShopFlag = true;
    let params = {
        cateFirstId: Data.cateInfo.parentId,
        shopId: Data.shopId,
        cateSecondId: Data.cateInfo.id,
        pageNum: Data.pageNum,
        pageSize: Data.pageSize
    };
    if (Data.totalCount != shopList.value.length) {
        Data.loadmoreStatus = 'loading';
    }
    state.goodsEmpty = false;
    request('goodsCategoryListServ', params)
        .then(async res => {
            let listArr = res.data.list || [];
            let list = listArr.map(item => {
                if (item.activity?.id && item.activity?.activity_good_type == 2) {
                    let sortArr = item.activity.activity_goods.sort((a, b) => a.spike_price - b.spike_price);
                    item.goodsMinPrice = sortArr[0].spike_price;
                    item.goodsMaxPrice = sortArr[sortArr.length - 1].spike_price;
                }
                return item;
            });
            if (type === 1) {
                // 重新加载当前页的数据
                let ids = list.map(item => item.goodsId);
                shopList.value.forEach((item, index) => {
                    if (ids.indexOf(item.goodsId) > -1) {
                        shopList.value[index] = list[ids.indexOf(item.goodsId)];
                    }
                });
            } else if (type) {
                shopList.value = shopList.value.concat(list);
            } else {
                Data.scrollShopTop = 0;
                shopList.value = list;
            }

            Data.totalCount = res.data.totalCount;
            Data.totalPage = res.data.totalPage;
            if (Data.totalCount === 0) {
                state.goodsEmpty = true;
            }
            shopListFlag.value = true;
            rightShopFlag = false;

            Data.loadmoreStatus = 'nomore';
        })
        .catch(() => {
            rightShopFlag = false;
            Data.loadmoreStatus = 'nomore';
        });
};
// 更新当前页分组商品数据（使用场景：加购商品提示售罄、下架等情况）
const getGroupData = () => {
    queryShopList(1);
};
const jump = val => {
    let query = {
        goodsNo: val.goodsNo,
        goodsId: val.goodsId
    };
    router.push({
        path: '/pages-cart/good/index',
        query
    });
};

const jumpCart = async (val, index, e) => {
    if (e.type !== 'tap') return;
    if (val.activity?.activity_type == 2) {
        toGoodsDetail(val);
        return;
    }
    if (!(await checkToken())) {
        router.push('/pages-user/login/index');
        return;
    }
    if (val.goodsStock < 1 || ['3', '2'].includes(val.onSale)) return;
    state.type = 1;
    state.activityId = '';
    state.activityStatus = '';
    if (val.activity) {
        if (val.activity.activity_good_type == 2) {
            state.type = 2;
        }
        state.activityId = val.activity.id;
        state.activityType = val.activity.activityStatusName?.real_status;
    }
    shopIndex.value = index;
    goodsData.goodsNo = val.goodsNo;
    goodsData.goodsId = val.goodsId;
    goodsData.show = true;
};
onShareAppMessage(res => {
    return {
        path: '/pages/tabbar/category?shopId=' + storage.get('ZW_SHOP_ID')
    };
});
const change = type => {
    goodsData.show = type.show;
};
const close = param => {
    popup.value.close();
    goodsData.show = false;
    let i = shopList.value[shopIndex.value].cartNum || 0;
    shopList.value[shopIndex.value].cartNum = i + param.quantity;
};
const cancel = () => {
    popup.value.close();
    goodsData.show = false;
};
const toConfirm = val => {
    let { quantity, skuId, goodsId } = val;
    let query = { skuList: JSON.stringify([{ goodsId, quantity, skuId }]) };
    router.push({
        path: '/pages-cart/confirm/index',
        query
    });
};

const priceNum = (amount, index) => {
    let price = floatDivide(amount, 100);
    let list = [];
    try {
        list = price.toString().split('.');
    } catch (e) {
        list = [Number(price)];
    }
    return list[index];
};

const imageError = index => {
    shopList.value[index].coverSrc = defaultImg.value;
};

const getTagName = item => {
    if (item?.activityProgress == 1) {
        return 'manjian_tag';
    }
    if (item.activity?.id && item.activity?.activity_type == 2) {
        return 'miaosha_tag';
    }
    if (item.activity?.id && [3, 4, 5].includes(item.activity?.activity_type)) {
        return 'pintuan_tag';
    }
    return '';
};

const toSearch = () => router.push('/pages-home/search/index');

const toGoodsDetail = ({ goodsId }) => {
    router.push({
        path: '/pages-cart/good/index',
        query: { goodsId }
    });
};
/**
 *  切换门店后重新获取数据
 */
const onShopIdChange = () => {
    let newShoId = storage.get('ZW_SHOP_ID');
    if (Data.shopId != newShoId) {
        Data.shopId = newShoId;
        queryLevelList();
    }
};
let observer = null;
onReady(() => {
    observer = uni.createIntersectionObserver();
    observer.relativeTo('.list-right-shop-scroll').observe('.u_loadmore', res => {
        if (res.intersectionRatio > 0 && !appear) {
            appear = true;
        } else if (!res.intersectionRatio > 0 && appear) {
            appear = false;
        }
    });
});
onUnload(() => {
    if (observer) {
        observer.disconnect();
    }
});
// 判断商品状态（秒杀和其他商品不同，其他商品onSale==3就是售罄状态，秒杀商品库存是预占的需要判断spike_stock_surplus）
const getSkillNum = item => {
    if (item.activity?.id && item.activity?.activity_type == 2) {
        let total = 0;
        (item.activity?.activity_goods || []).forEach(value => {
            total += Number(value.spike_stock_surplus);
        });
        return total > 0 ? false : true;
    } else {
        return item.onSale == 3;
    }
};
onShow(() => {
    traceStart();
    onShopIdChange();
    if (storage.get('CATEGORY_ID')) {
        queryLevelList();
    }
    shopName.value = uni.getStorageSync('shopName');
    props.shopId && storage.set('ZW_SHOP_ID', Number(props.shopId));
    if (navChildrenList.value.length) {
        let info = navChildrenList.value.find(el => el.active) || {};
        traceLoad('visit_page_cate_list', { cateId: info.id, cateName: info.categoryName });
    }
});

onHide(() => {
    storage.remove('CATEGORY_ID');
    traceStay();
});
</script>
<style lang="scss" scoped>
.u_loadmore {
    min-height: 4rpx;
}
.category-main {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    .search-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14rpx 29rpx;
        border-top: 2rpx solid #f5f5f5;
        border-bottom: 2rpx solid #f5f5f5;
        .search-title-left {
            flex: 1;
            display: flex;
            align-items: center;
            color: #999999;
            font-size: 25rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            height: 70rpx;
            line-height: 70rpx;
            background: #f5f5f5;
            border-radius: 28rpx;
            .icon-img {
                width: 29rpx;
                height: 29rpx;
                margin-left: 22rpx;
                margin-right: 11rpx;
                line-height: 58rpx;
            }
        }
        .search-title-right {
            margin-left: 29rpx;
            font-size: 29rpx;
            color: #333333;
            font-family: PingFangSC-Regular, PingFang SC;
            line-height: 58rpx;
        }
    }
    .category-content {
        display: flex;
        justify-content: space-between;
        .list-left {
            width: 218rpx;
            position: absolute;
            left: 0;
            bottom: 0;
            overflow-y: scroll;
            background: #f9f9f9;
            .nav-item {
                padding: 33rpx 29rpx 29rpx 29rpx;
                font-size: 25rpx;
                // height: 98rpx;
                line-height: 36rpx;
                text-align: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .list-nav-active {
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 600;
                color: #fe292b;
                background: #ffffff;
                position: relative;
                &::before {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 0;
                    width: 8rpx;
                    height: 34rpx;
                    background: #fe292b;
                    transform: translateY(-50%);
                }
            }
        }
        .list-right {
            flex: 1;
            position: absolute;
            left: 218rpx;
            right: 0;
            bottom: 0;
            .list-nav-children {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                padding: 24rpx 0;
                :deep(.u-tabs) {
                    .u-tabs__wrapper {
                        .u-tabs__wrapper__nav__item {
                            &:first-child {
                                margin-left: 29rpx;
                            }
                            &:last-child {
                                margin-right: 29rpx !important;
                            }
                        }
                    }
                }

                .list-nav-children-scroll-view {
                    white-space: nowrap;
                    height: 80rpx;
                }
                .list-nav-children-scroll {
                    margin: 24rpx 16rpx 0rpx 22rpx;
                    // display: flex;
                    width: 100%;
                    font-size: 26rpx;
                    overflow: auto hidden;
                }
                .nav-children-item {
                    display: inline-block;
                    // width: 100%;
                    margin-right: 18rpx;
                    padding: 8rpx 22rpx;
                    color: #999999;
                    font-size: 25rpx;
                    line-height: 36rpx;
                    border-radius: 26rpx;
                    border: 2rpx solid #979797;
                }
                .nav-children-item-active {
                    color: #fe292b;
                    border: 2rpx solid #fe292b;
                }
            }
            .list-right-shop {
                position: absolute;
                top: 86rpx;
                left: 0;
                right: 0;
                bottom: 0;
                .list-right-shop-scroll {
                    height: 100%;
                    .shop-list {
                        min-height: 100%;
                    }
                    .shop-list-loading {
                        padding: 12rpx 0;
                        text-align: center;
                        font-size: 28rpx;
                        font-weight: 300;
                        color: #999999;
                        line-height: 22rpx;
                    }
                }
                .shop-item {
                    margin: 0 28rpx 0 22rpx;
                    padding: 28rpx 0;
                    border-bottom: 2rpx solid #f5f5f5;
                    display: flex;
                    .common {
                        position: relative;
                    }
                    .manjian_tag::before {
                        width: 55rpx;
                        height: 33rpx;
                        margin-right: 6rpx;
                        padding: 4rpx;
                        content: '满减';
                        text-align: center;
                        color: #ffffff;
                        border-radius: 4rpx;
                        background: #fe292b;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-size: 22rpx;
                        font-weight: 500;
                        line-height: 33rpx;
                        vertical-align: 3rpx;
                    }
                    .miaosha_tag::before {
                        width: 55rpx;
                        height: 33rpx;
                        margin-right: 6rpx;
                        padding: 4rpx;
                        content: '秒杀';
                        text-align: center;
                        color: #ffffff;
                        border-radius: 4rpx;
                        background: #fe292b;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-size: 22rpx;
                        font-weight: 500;
                        line-height: 33rpx;
                        vertical-align: 3rpx;
                    }
                    .pintuan_tag::before {
                        content: '拼';
                        width: 29rpx;
                        height: 29rpx;
                        margin: 0 4rpx;
                        font-size: 22rpx;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #ffffff;
                        line-height: 29rpx;
                        display: inline-block;
                        background: #fe292b;
                        border-radius: 4rpx;
                        text-align: center;
                        vertical-align: 3rpx;
                    }
                    .shop-item-img {
                        width: 144rpx;
                        height: 144rpx;
                        border-radius: 8rpx;
                    }
                    .shop-item-right {
                        flex: 1;
                        padding-left: 8rpx;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        .shop-item-name {
                            font-size: 26rpx;
                            font-family: STHeitiSC-Light, STHeitiSC;
                            font-weight: 400;
                            color: #33302d;
                            line-height: 36rpx;
                            display: -webkit-box;
                            overflow: hidden;
                            -webkit-line-clamp: 2;
                            -webkit-box-orient: vertical;
                        }
                        .shop-item-button {
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 600;
                            color: #fe292b;
                            // line-height: 29rpx;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            font-size: 24rpx;
                            .price {
                                font-size: 36rpx;
                            }
                            .price-qi {
                                font-weight: 400;
                            }
                            .icon-img {
                                width: 54rpx;
                                height: 54rpx;
                            }
                            .seckill_btn {
                                padding: 0 25rpx;
                                height: 54rpx;
                                background: linear-gradient(270deg, #ff5356 0%, #fe292b 100%);
                                border-radius: 27rpx;
                                font-size: 24rpx;
                                text-align: center;
                                font-family: PingFangSC-Medium, PingFang SC;
                                font-weight: 500;
                                color: #ffffff;
                                line-height: 54rpx;
                            }
                            .shop-cart {
                                position: relative;
                                .shop-cart-num {
                                    position: absolute;
                                    top: -7rpx;
                                    right: -2rpx;
                                    width: 25rpx;
                                    height: 25rpx;
                                    color: #fe292b;
                                    font-size: 22rpx;
                                    line-height: 24rpx;
                                    font-weight: 400;
                                    text-align: center;
                                    background: #ffffff;
                                    border-radius: 50%;
                                    border: 2rpx solid #fe292b;
                                    text {
                                        font-size: 20rpx;
                                    }
                                }
                                .shop-cart-num-s {
                                    width: 34rpx;
                                    border-radius: 13rpx;
                                }
                            }
                        }
                    }
                }
                .shop-item:nth-last-child(1) {
                    border-bottom: none;
                }
            }
        }
        .no-shop {
            width: 100%;
            .no-shop-img {
                width: 290rpx;
                height: 187rpx;
            }
            .no-shop-text {
                padding-top: 29rpx;
                font-size: 29rpx;
                color: #333333;
                line-height: 40rpx;
            }
        }
    }
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        color: transparent;
        display: none;
    }
}
</style>
